<template>
  <view>
    <view v-if="isShow" class="mask" @touchmove.stop.prevent="()=>{}" catchtouchmove="true"></view>
    <view v-if="isShow" class="course-comment center column">
      {{commentData.score}}
      <uni-rate :size="22" :value="commentData.score" @change="changeRate"></uni-rate>
      <text class="desc">{{props.descArr[commentData.score-1]}}</text>
      <view class="input-box center">
        <textarea :value="commentData.content" @input="getContent" class="textarea" value="" placeholder="请输入课程评价..." />
        <text class="btn" @click="subComment">提交</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { reactive,ref} from 'vue'
  const props = defineProps({
    comment:{
      type:Object,
      default:()=>({
        
      })
    },
		descArr: { //每个评分的提示内容
			type: Array,
			default: () => [
				'极差,课程很糟糕，我要吐槽。', 
				'差,我对课程不满意。', 
				'中评,课程一般。', 
				'良好,课程还可以。', 
				'推荐,课程非常棒。'
			]
		}
  })
  // 绑定数据
  let commentData = ref({
    userId:1,
    nickName:'昂是',
    userImage:'11.png',
    content:'',
    score:5
  })
  const isShow = ref(false)
  
  const show = ()=>{
    isShow.value = !isShow.value
  }
  
  const emit = defineEmits(['subComment'])
  // 提交按钮事件
  const subComment = (e)=>{
    commentData.value.content = commentData.value.content.trim()
    emit('subComment',commentData.value)
    
  }
  // 绑定评论内容
  const getContent = (e)=>{
    commentData.value.content = e.detail.value
  }
  // 选择评分
  let changeRate=(value)=>{
  	commentData.value.score=value.value
  }
  defineExpose({
    show
  })
</script>

<style scoped lang="scss">
  .course-comment{
    z-index: 100;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 50%;
    width: 630rpx;
    margin: 0 auto;
    padding-top: 30rpx;
    font-size: 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    .desc{
      color: black;
      letter-spacing: 2px;
      padding: 20rpx 0;
    }
    .input-box{
      border-top: 0.5px solid #efeff4;
      width: 100%;
      white-space: nowrap;  
    }
    .textarea{
      background-color: #F8F9FB;
      border-radius: 0 0 0 20rpx;
      height: 80rpx;
      font-size: 30rpx;
      padding: 10rpx;
      width: 90%;
    }
    .btn{
      padding: 0 15rpx;
      color:$mxg-text-color-blue;
      text-align: center;
      width: 100rpx;
    }
  }

</style>
